<template>
  <el-form size="large" inline label-width="120px">
    <el-tabs tab-position="left">
      <el-tab-pane v-for="item in groupList" :label="item.groupName" :key="item.attributeId">
        <div v-for="attr in item.attributes" :key="attr.attributeId">
          <el-form-item :label="attr.attrName">
            <el-input-tag
                v-model="attr.attributeValues"
                placeholder="请输入属性值"
                clearable
                aria-label="Please click the Enter key after input"
            />
          </el-form-item>
          <el-form-item label="是否快速显示">
            <el-switch v-model="attr.quickShow" inactive-text="否" active-text="是" inactive-value="1"
                       active-value="0"/>
          </el-form-item>
        </div>
      </el-tab-pane>
    </el-tabs>
  </el-form>
  <el-row :gutter="20">
    <el-col :span="3" :offset="6">
      <div>
        <el-button type="primary" @click="formStore.back()">上一步</el-button>
      </div>
    </el-col>
    <el-col :span="3" :offset="4">
      <div>
        <el-button type="success" @click="formStore.next()">下一步:设置销售属性</el-button>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import {ref, onMounted, onUnmounted} from "vue";
import {useGoodsFormStore} from "@/stores/form/goods-form";
import {reqGetSkuGroupAttributeValuesByCategoryId,} from '@/api/serve/re-market'

let formStore = useGoodsFormStore()
let groupList = ref([])

let getAttrGroupList = async () => {
  let res = await reqGetSkuGroupAttributeValuesByCategoryId(formStore.addGoodsForm.spuInfo.categoryId)
  groupList.value = res.data
}

onMounted(() => {
  if (formStore.addGoodsForm.groupAttributeList.length === 0) {
    getAttrGroupList()
  } else {
    groupList.value = [...formStore.addGoodsForm.groupAttributeList]
  }
})
onUnmounted(() => {
  formStore.setGroupAttributeList(groupList.value)
})
</script>
<style scoped>

</style>
